
<template>
  <div class="system-customer">
    <xr-header/>

    <div class="customer-content">
      <div class="system-view-nav">
        <Tree :data="categoryData" expand="true" default-expand-all="true" @on-select-change="refreshTask"></Tree>

      </div>

      <div class="system-view-content" >
        <div class="option-bar">
          <el-row type="flex" justify="start" style="margin-left: -16px">
            <el-form :inline="true" :model="queryForm" class="demo-form-inline" label-width='80px' inline size='mini'>
              <el-form-item label="流程名称">
                <el-input v-model="queryForm.name" clearable></el-input>
              </el-form-item>
              <el-form-item label="流程别名">
                <el-input v-model="queryForm.modelKey" clearable></el-input>
              </el-form-item>
              <el-form-item label='状态' prop='status'>
                <el-select v-model='queryForm.status' clearable>
                  <el-option v-for="item in statusList" :value="item.value" :label="item.label"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
                <el-button type="default" @click="reset">重置</el-button>
              </el-form-item>
            </el-form>
          </el-row>

        </div>
        <el-row class="margin:30px;">
          <el-col>
            <el-table
              :data="tableData"
              size="mini"
              style="width: 100%"
              :height="tableHeight"
            >
              <el-table-column
                fixed
                prop="name"
                label="名称"
                width='180'
              >
              </el-table-column>
              <el-table-column
                prop="modelKey"
                label="流程别名"
              >
              </el-table-column>
              <el-table-column
                prop="status"
                label="状态"
              >



                <template slot-scope="scope">
                  <el-tag v-if="scope.row.defId==null || scope.row.defId==''" type="danger" class="tag">未发布</el-tag>
                  <el-tag v-else type="success" class="tag">已发布</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="version"
                label="版本号"
              >
              </el-table-column>
              <el-table-column
                label="操作"
                width='350'
                fixed="right"
              >
                <template slot-scope="scope">
                  <a  style="color: #409EFF;" :href="'http://simulation.pangubpm.com/viewer.html?id=' + scope.row.id"   target="_blank"  >测试 </a>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <div class="p-contianer">
          <el-pagination
            background
            class="p-bar"
            @current-change="handleCurrentChange"
            :current-page="queryForm.page"
            :page-size="queryForm.pageSize"
            layout="prev, pager, next, sizes, total, jumper"
            :total="total">
          </el-pagination>
        </div>



      </div>

    </div>


    <Modal :mask-closable="false" v-model="modelerModal" fullscreen title="杰狮BPM流程设计器"  @on-cancel="cancelModel"  :transfer="false">
      <iframe   width="100%"      height='100%' style="min-height: 650px" frameborder='0' align='center' allowfullscreen='true'    allow="autoplay"   id='iframe'  :src="modelerSrc"   ></iframe>
      <div slot="footer"></div>
    </Modal>
    <Modal :mask-closable="false"  v-model="viewImageModeler" fullscreen title="流程仿真"  :transfer="false">
      <iframe   width="100%"      height='100%' frameborder='0' align='center' allowfullscreen='true'    allow="autoplay"   id='iframe2'  :src="viewImageModelerTmpSrc"   ></iframe>
      <div slot="footer"></div>
    </Modal>
  </div>


</template>
<style rel="stylesheet/scss" lang="scss" scoped>
  .p-contianer {
    position: relative;
    background-color: white;
    height: 44px;
    .p-bar {
      float: right;
      margin: 5px 100px 0 0;
      font-size: 14px !important;
    }
  }
  .option-bar {
    padding: 15px 20px;
  }
  .system-customer {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 0 15px;
  }
  .customer-content {
    flex: 1;
    position: relative;
    display: flex;
    overflow: hidden;
  }
  .system-view-nav {
    min-width: 200px;
    background: #fff;
    margin-right: 10px;
    padding-top: 20px;
    border: 1px solid #e6e6e6;
    border-radius: 4px;

  }
  .system-view-content {
    flex: 1;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
  }

  // 菜单
  .menu-item {
    color: #333;
    font-size: 13px;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    position: relative;
    .icon-close {
      position: absolute;
      top: 0;
      right: 8px;
      z-index: 1;
      display: none;
    }
  }

  .menu-item:hover,
  .menu-item.is-select {
    background-color:  #F6F8FA;
  }

  .menu-item:hover::before,
  .menu-item.is-select::before {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 2px;
    background-color: #5383ed;
  }
</style>

<script>
  import {getTaskData, getTaskChartData,getBpmnModelCategory,getModelerJson,publishModel} from "@/api/analy";
  import Footer from '../../../common/footer';
  import XrHeader from '@/components/XrHeader'

  export default {
    name: 'Task',
    components:{
      Footer,XrHeader
    },

    data() {
      return {
        tableData: [],
        tableHeight: 450,
        queryDate:[],
        total: 0,
        chartVisible: false,
        modelerModal: false,
        viewImageModeler: false,
        chartData: {},
        url:'http://simulation.pangubpm.com/viewer.html?id=',
        baseURL: process.env.VUE_APP_BASE_BPM_API,
        modelerSrc: process.env.VUE_APP_BASE_BPM_API+"diagram/index.html",
        viewImageModelerSrc: process.env.VUE_APP_BASE_BPM_API+"view/def.html?&modelId=",
        viewImageModelerTmpSrc:"",
        shopName: [],
        statusList:[
          {label:"未发布",value:"0"},
          {label:"已发布",value:"1"},
        ],
        queryForm: {
          name: "",
          modelKey: "",
          createTime: "",
          page: 1,
          limit: 10,
          pageSize: 10,

          status: '',
          whereSql: "",
          type: 5,
          typeKey: ""
        },
        categoryData: [
        ]
      }
    },
    mount() {
      this.getData()
      this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop
    },
    created() {
      this.getData()
    },
    methods: {
      locationUrl:function(id){
        if (id){
          var url=this.baseURL+"diagram/index.html";
          url= url+'?id='+id+"&t="+new Date().getTime();
          this.modelerSrc=url
        }
        this.modelerModal=true;

      },
      cancelModel:function(){
        this.getModelerJsonAction();
      },
      viewImage:function(id){
        if (id){
          var url="http://simulation.pangubpm.com/viewer.html?id="+id
         this.url=url;

        }
        this.viewImageModeler=true;

      },
      versionManager:function(id,modelKey){

        this.$router.push({ name:'versionManager', query: { t: new Date().getTime(),"modelKey":modelKey }})
      },
      openModelDialog:function(){
        var url=this.baseURL;
        url=url+"diagram/index.html"+"?t="+new Date().getTime();
        this.modelerSrc=url
        this.modelerModal=true;
      },
      openModelDiffDialog:function(){
        this.modelerSrc="http://diff.pangubpm.com/"
        this.modelerModal=true;
      },
      publishModel:function(id){
        publishModel(id).then((response) => {
          if (response.code == 0) {
            this.$message({"duration":800,message:'发布成功',type:'success',customClass:'zZindex'});

            this.getModelerJsonAction();
          }else{
            this.$message({"duration":800,message:response.msg,type:'warning',customClass:'zZindex'});

          }

        })
      },
      queryFormCreateTime:function(e){
        this.queryForm.createTime=e;
      },
      refreshTask:function(data){
        if (data[0].parentId=='-1'){
          this.queryForm.typeKey=""
          this.queryForm.type = 5
        } else{
          this.queryForm.typeKey=data[0].id;
          this.queryForm.type = 1

        }
        this.queryForm.createTime=""
        this.queryDate = [];
        this.queryForm.whereSql = "";
        this.queryForm.page=1
        this.getModelerJsonAction()
        this.queryForm.type = 5


      },
      queryMethod:function(){
        var name=  this.queryForm.name;
        var whereSql='';
        var createTime=  this.queryForm.createTime;
        if (createTime ){
          if (createTime[0]){
            whereSql="  CREATE_TIME_  between '"+createTime[0]+"' and "+"'"+createTime[1]+"'";
          }

        }
        this.queryForm.whereSql=whereSql;
        getModelerJson(this.queryForm).then((response) => {
          this.tableData = response.data
          this.total = parseInt(response.count);

        })

      },
      getModelerJsonAction:function(){
        getModelerJson(this.queryForm).then((response) => {

          this.tableData = response.data
          this.total = parseInt(response.count);

        })
      },
      getData: function () {
        getBpmnModelCategory().then((response) => {
          this.categoryData = response.data

        })
        this.getModelerJsonAction();

      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.getModelerJsonAction()
      },
      handleClick(val) {
        getTaskChartData({"seller_id": val}).then((response) => {
          this.chartData = response.data
          this.sellerId = val
          this.shopName = response.data.shopName
          this.chartVisible = true
        })
      },
      search() {
        this.queryForm.page = 1
        this.queryForm.type = 2
        this.queryForm.typeKey = ""
        this.queryMethod()
        this.queryForm.type = 5
      },
      reset() {
        this.queryForm.typeKey = ""
        this.queryForm.status = ""
        this.queryForm.type = 5
        this.queryForm.name = ""
        this.queryForm.modelKey = ""
        this.getData();
      }

    }

  }

</script>
<style lang="scss">
  .task-card{
    margin-top: 10px;
  }

</style>
